<template>
  <v-card variant="outlined" class="ide-container">
    <!-- 1. 顶部工具栏 (无变化) -->
    <v-toolbar density="compact" flat color="grey-lighten-3">
      <v-toolbar-title class="text-subtitle-2 font-weight-medium">
        {{ filename }}
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
          @click="runCode"
          :loading="isRunning"
          color="black"
          variant="text"
          prepend-icon="mdi-play"
          size="small"
      >
        运行
      </v-btn>
    </v-toolbar>
    <v-divider></v-divider>

    <!-- 2. 关键改动：使用 Codemirror 组件替换原来的实现 -->
    <div class="code-editor-wrapper">
      <Codemirror
          v-model="editableCode"
          placeholder="请在此处粘贴代码..."
          :style="{ height: '100%' }"
          :autofocus="true"
          :indent-with-tab="true"
          :tab-size="4"
          :extensions="extensions"
      />
    </div>

    <!-- 3. 控制台区域 (无变化) -->
    <div v-if="showConsole">
      <v-divider></v-divider>
      <div class="console-container">
        <div class="console-header text-caption">
          <span>控制台</span>
          <v-spacer></v-spacer>
          <v-icon size="small" @click="showConsole = false" style="cursor: pointer;">mdi-close</v-icon>
        </div>
        <div class="console-output">
          <pre>{{ consoleOutput }}</pre>
        </div>
      </div>
    </div>
  </v-card>
</template>

<script setup>
import { ref, watch, shallowRef } from 'vue';
import { Codemirror } from 'vue-codemirror';
import { python } from '@codemirror/lang-python';
import { oneDark } from '@codemirror/theme-one-dark';

// --- Props and Emits (无变化) ---
const props = defineProps({
  filename: String,
  code: String,
  expectedResult: String,
});
const emit = defineEmits(['update:code']);


// --- 状态管理 ---
const isRunning = ref(false);
const showConsole = ref(false);
const consoleOutput = ref('');
let typingInterval = null;
const editableCode = ref(props.code);

// 关键改动：定义 Codemirror 的扩展
const extensions = shallowRef([python(), oneDark]);


// --- 侦听器 (无变化) ---
watch(() => props.code, (newCode) => {
  if (newCode !== editableCode.value) {
    editableCode.value = newCode;
  }
});
watch(editableCode, (newValue) => {
  emit('update:code', newValue);
});


// --- 其他方法 (无变化) ---
const runCode = () => {
  if (typingInterval) clearInterval(typingInterval);
  isRunning.value = true;
  showConsole.value = true;
  consoleOutput.value = `▶ 正在运行 ${props.filename}...`;
  setTimeout(() => {
    isRunning.value = false;
    startTypingEffect();
  }, 1500);
};
const startTypingEffect = () => {
  const lines = props.expectedResult.trim().split('\n');
  let lineIndex = 0;
  consoleOutput.value = `▶ 运行 ${props.filename} 完成\n\n`;
  typingInterval = setInterval(() => {
    if (lineIndex < lines.length) {
      consoleOutput.value += lines[lineIndex] + '\n';
      lineIndex++;
    } else {
      clearInterval(typingInterval);
    }
  }, 100);
};
</script>

<style scoped>
/* 关键改动：样式大幅简化 */
.ide-container {
  display: flex;
  flex-direction: column;
  height: 75vh;
  min-height: 500px;
  border: 1px solid #ddd;
}

.code-editor-wrapper {
  flex-grow: 1;
  /* 确保 Codemirror 填满剩余空间 */
  overflow: hidden;
}

/* Codemirror 默认字体可能较小，可以进行覆盖 */
.code-editor-wrapper :deep(.cm-editor) {
  font-family: 'Fira Code', 'Courier New', Courier, monospace;
  font-size: 14px;
}


/* --- 控制台样式 (无变化) --- */
.console-container {
  background-color: #f5f5f5;
}
.console-header {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background-color: #e0e0e0;
  color: #555;
}
.console-output {
  height: 200px;
  overflow-y: auto;
  padding: 12px;
  background-color: #ffffff;
  color: #333;
}
.console-output pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
</style>